<template>
    <div>
        <wd-header title="积分明细">
            <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
        </wd-header>

        <div class="container" v-if="datas != null">
            <div class="top">
                <span>{{datas.countPoints}}</span>
                <p>当前的积分</p>
            </div>
            <div class="border"></div>
            <div class="content">
                <ul>
                    <li v-for="(item,index) in lists" :key="index">
                        <div class="left">
                            <p>{{item.create_time}}</p>
                            <p>{{item.title}}</p>
                        </div>
                        <div class="right">
                            <p>+{{item.points}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <p class="no_points" v-else>
        	您当前没有积分,请前去购买课程
        </p>
    </div>
</template>
<script>
export default {
    name: 'mypoints',
    data() {
        return {

        }
    },
    computed: {
        datas() {
            if(this.$store.state.points != null){
                return this.$store.state.points
            }
        },
        lists(){
        	if(this.$store.state.points != null){
                return this.$store.state.points.pointsList
            }
        }
    },
    methods: {
        goback() {
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="scss" scoped>
    .container{
        font-size:14px;
    }

	.top {
	    margin-top: 30px;
	    text-align: center;
	    color: #fe4f4a;
	    span {
	        font-size: 30px;
	    }
	}
	
	.border {
	    height: 10px;
	    width: 100%;
	    margin-top: 30px;
	    background: #eee;
	}

	.content{
		li{
			padding: 0.37037rem;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content:space-between;
			align-items:center;

			.left{
				p:nth-child(1){
					color: #555;
					margin-bottom: 0.185185rem;
				}
			}

			.right{
				p{
					color:#fe4f4a; 
				}
			}
		}
	}

    .no_points{
        font-size:14px;
        text-align: center;
        color: #555;
        margin-top: 50%;
    }
</style>
